<template>
  <div>
    <div class="page-title">
      <i class="iconfont icon-arrow-left cursor" @click="$router.go(-1)"></i>
      {{ $route.meta.title }}
    </div>
    <div class="know-container" v-loading="loading">
      <div class="auditDaka">
        <el-form
          @submit.native.prevent
          class="margin-top-lg"
          :label-position="labelPosition"
          label-width="130px"
          :model="ruleForm"
          ref="ruleForm"
          :rules="rules"
        >
          <el-form-item prop="Username" class="margin-left-lg margin-top must" label="姓名">
            <el-input class="form-input-h" v-model="ruleForm.Username" placeholder="请输入"></el-input>
            <p class="form_p_g">输入账号使用者的姓名！</p>
          </el-form-item>

          <el-form-item prop="Name" class="margin-left-lg margin-top must" label="账号名" >
            <el-input class="form-input-h"  v-model="ruleForm.Name"  readonly></el-input>
            <p class="form_p_g">用于后台登录！</p>
          </el-form-item>

          <el-form-item prop="Password" class="margin-left-lg margin-top must" label="密码">
            <el-input
              class="form-input-h"
              v-model="ruleForm.Password"
              placeholder="请输入"
              maxlength="20"
              type="password"
            ></el-input>
            <p class="form_p_g">输入账号的密码，6-20位字符不限！</p>
          </el-form-item>

          <!-- QQ号码 -->
          <el-form-item prop="QQ" class="margin-left-lg margin-top must" label="QQ">
            <el-input class="form-input-h" v-model="ruleForm.QQ" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Tel号码 -->
          <el-form-item prop="Tel" class="margin-left-lg margin-top must" label="电话号码">
            <el-input class="form-input-h" v-model="ruleForm.Tel" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Email -->
          <el-form-item prop="Email" class="margin-left-lg margin-top must" label="邮箱地址">
            <el-input class="form-input-h" v-model="ruleForm.Email" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Alipay_user -->
          <el-form-item prop="Alipay_user" class="margin-left-lg margin-top must" label="支付宝名">
            <el-input class="form-input-h" v-model="ruleForm.Alipay_user" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Alipay_acc -->
          <el-form-item prop="Alipay_acc" class="margin-left-lg margin-top must" label="支付宝账号">
            <el-input class="form-input-h" v-model="ruleForm.Alipay_acc" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Website -->
          <el-form-item prop="Website" class="margin-left-lg margin-top must" label="推广域名">
            <el-input class="form-input-h" v-model="ruleForm.Website" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Web_address -->
          <el-form-item prop="Web_address" class="margin-left-lg margin-top must" label="推广地址">
            <el-input class="form-input-h" v-model="ruleForm.Web_address" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- Package_url -->
          <el-form-item prop="Package_url" class="margin-left-lg margin-top must" label="包下载地址">
            <el-input class="form-input-h" v-model="ruleForm.Package_url" placeholder="请联系管理员添加"  readonly></el-input>
          </el-form-item>

          <el-form-item class="text-center margin-top-lg">
            <el-button :disabled="loading" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import api from "@/utils/api";
import { getCookie } from "@/utils";
export default {
  data() {
    var validatePass3 = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("请正确输入密码"));
      } else {
        callback();
      }
    };
    return {
      data: [],
      labelPosition: "right",
      ruleForm: {
        Username: "",
        Name: "",
        Password: "",
        RoleID: "",
        QQ: "",
        Tel: "",
        Email: "",
        Alipay_user: "",
        Alipay_acc: "",
        Price: "",
        Website: "",
        Web_address: "",
        Package_url: "",
        Sub_rate: "",
        Sub_start: "",
        ID: this.$route.params.id
      },
      rules: {
        Username: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        Name: [
          {
            required: true,
            message: "请输入账号名",
            trigger: "blur"
          }
        ],
        Password: [
          {
            required: true,
            validator: validatePass3,
            trigger: "blur"
          }
        ],
        RoleID: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change"
          }
        ],
        QQ: [
          {
            required: false,
            message: "请输入QQ账号",
            trigger: "blur"
          }
        ],
        Tel: [
          {
            required: false,
            message: "请输入电话号码",
            trigger: "blur"
          }
        ],
        Email: [
          {
            required: false,
            message: "请输入邮件地址",
            trigger: "blur"
          }
        ],
        Alipay_user: [
          {
            required: false,
            message: "请输入支付宝名",
            trigger: "blur"
          }
        ],
        Alipay_acc: [
          {
            required: false,
            message: "请输入支付宝账户",
            trigger: "blur"
          }
        ],
        Price: [
          {
            required: false,
            message: "请输入单价",
            trigger: "blur"
          }
        ],
        Website: [
          {
            required: false,
            message: "请输入推广网站",
            trigger: "blur"
          }
        ],
        Web_address: [
          {
            required: false,
            message: "请输入推广网址",
            trigger: "blur"
          }
        ],
        Package_url: [
          {
            required: false,
            message: "请输入下载包地址",
            trigger: "blur"
          }
        ],
        Sub_rate: [
          {
            required: false,
            message: "请输入扣量数",
            trigger: "blur"
          }
        ],
        Sub_start: [
          {
            required: false,
            message: "请输入扣量起始数",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      resetdata: false
    };
  },
  computed: {
    ...mapState(["RolesData","UserProfile"])
  },
  methods: {
    ...mapActions(["getRoles","getUserProfile"]),
    async getData() {
      if(this.UserProfile.length == 0) {
					await this.getUserProfile()
      }
      if (this.UserProfile.ID) {
        this.loading = true;
        const data = await api.getAdminsDetail(this.UserProfile.ID);
        await this.getRoles();
        this.ruleForm.ID = this.UserProfile.ID;
        this.ruleForm.Username = data.data.Username;
        this.ruleForm.Name = data.data.Name;
        this.ruleForm.Password = data.data.Password;
        this.ruleForm.RoleID = data.data.RoleID;
        this.ruleForm.QQ = data.data.QQ;
        this.ruleForm.Tel = data.data.Tel;
        this.ruleForm.Email = data.data.Email;
        this.ruleForm.Alipay_user = data.data.Alipay_user;
        this.ruleForm.Alipay_acc = data.data.Alipay_acc;
        this.ruleForm.Price = data.data.Price;
        this.ruleForm.Website = data.data.Website;
        this.ruleForm.Web_address = data.data.Web_address;
        this.ruleForm.Package_url = data.data.Package_url;
        this.ruleForm.Sub_rate = data.data.Sub_rate;
        this.ruleForm.Sub_start = data.data.Sub_start;
      } else {
        await this.getRoles();
      }

      this.loading = false;
    },
    //提交表单
    submitForm(formName) {
      let id = this.UserProfile.ID;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (id) {
            this.putAdmins();
          } else {
            this.postAdmins();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async postAdmins() {
      this.loading = true;
      const data = await api.postAdmins(this.ruleForm);
      if (data.status) {
        this.$message({
          type: "success",
          message: data.msg
        });
        this.$router.push({
          name: "Home"
        });
      } else {
        this.$message({
          type: "info",
          message: data.msg
        });
      }
      this.loading = false;
    },
    async putAdmins() {
      this.loading = true;
      // if(this.ruleForm.Password == ''){
      // 	delete this.ruleForm.Password
      // }
      const data = await api.putAdmins(this.ruleForm);
      if (data.status) {
        this.$message({
          type: "success",
          message: data.msg
        });
        this.$router.push({
          name: "Home"
        });
      } else {
        this.$message({
          type: "info",
          message: data.msg
        });
      }
      this.loading = false;
    },
    resetForm(formName) {
      //this.$refs[formName].resetFields();
      if (this.resetdata) {
        this.$confirm("真的要退出此次编辑？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            this.$router.go(-1);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      } else {
        this.$router.go(-1);
      }
    }
  },
  mounted: function() {
    this.getData();
  },
  watch: {
    ruleForm: {
      handler(curVal, oldVal) {
        this.resetdata = true;
      },
      deep: true
    }
  }
};
</script>
<style lang="less" scoped>
.auditDaka {
  &-arrow {
    & .icon-07jiantouxiangzuo {
      vertical-align: middle;
      font-size: 24px;
      color: #444444;
    }
  }
}
</style>
<style scoped>
.form-input-h {
  width: 400px;
}

.form_p_g {
  font-size: 14px;
  color: #888;
  clear: both;
}

.tree-box {
  margin-top: 10px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  width: 800px;
  padding: 10px;
  min-height: 220px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  line-height: 1;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.colrecom_form {
  width: 200px;
  border: 1px solid #ccc;
  line-height: initial;
  display: inline-block;
  position: relative;
  margin: 0 15px 1rem 0;
  float: left;
  height: 141px;
  border-radius: 4px;
}

.colrecom_form_add {
  width: 200px;
  border: 1px dotted #ccc;
  line-height: initial;
  display: inline-block;
  position: relative;
  margin: 0 15px 1rem 0;
  float: left;
  height: 141px;
  text-align: center;
  border-radius: 4px;
}

.colrecom_form_add > .el-icon-plus {
  height: 80px;
}

.colrecom_form > img {
  width: 100%;
}

.colrecom_form > p {
  line-height: normal;
  text-align: center;
  padding: 0 3px;
  word-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: justify;
}

.colrecom_form > .el-icon-error {
  color: #ff7043;
  position: absolute;
  top: -7px;
  right: -7px;
  font-size: 18px;
}

.input_search_video {
  width: 50%;
}

.span_search_video {
  color: #888;
  margin-left: 5%;
}

.select_show_video {
  width: 685px;
  margin: 0 auto;
}

.show_page {
  margin-top: 2rem;
  text-align: center;
}
</style>
